<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<link  rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}"/>
<head lang="en">
    <title>Create User</title>
</head>
<body>
<div class="container">
    <div th:replace="fragments :: navbar"></div>
    <div class="float-right mt-2">
        <a class="btn btn-primary btn-sm" th:href="@{/user/list}"> View All Users </a>
    </div>
    <h4 class="float-left mt-2">Create a User</h4>
    <div class="clearfix"></div>
    <form id="userForm" th:action="@{/add/user}" th:object="${user}" method="post">
        <div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
            <p th:each="error : ${#fields.errors('*')}" class="m-0" th:text="${error}">Validation error</p>
        </div>
        <div class="form-group">
            <label for="username">Username: </label>
            <input type="text" th:field="*{username}" th:class="${'form-control' + (#fields.hasErrors('username') ? ' is-invalid' : '')}"/>
        </div>
        <div class="form-group">
            <label for="password">Password: </label>
            <input type="text" th:field="*{password}" th:class="${'form-control' + (#fields.hasErrors('password') ? ' is-invalid' : '')}"/>
        </div>
        <div class="form-group">
            <label for="mobile">Mobile: </label>
            <input type="text" th:field="*{mobile}" th:class="${'form-control' + (#fields.hasErrors('mobile') ? ' is-invalid' : '')}"/>
        </div>
        <div class="form-group">
            <label ><span>&nbsp;Role:</span></label>
            <select multiple th:field="*{roles}" class="form-control" data-required="true">
                <option value="ADMIN">administrator</option>
                <option value="USER">user</option>
                <option value="SUPPORT">IT supports</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
</body>
</html>